<template>
	<view class="container">
		<!-- <view class="header">
			<text class="title">数据分析器</text>
		</view> -->
		
		<view class="search-container">
			<input class="search-input" type="text" v-model="searchQuery" placeholder="搜索中奖号码..." />
			<button class="search-button" :class="{ active: matchStartOnly }" @click="matchStartOnly = !matchStartOnly">
				{{ matchStartOnly ? '开头匹配' : '包含匹配' }}
			</button>
		</view>
		
		<!-- 新增倒序开关 -->
		<!-- <view class="sort-container">
			<text class="sort-label">倒序显示：</text>
			<switch class="reverse-switch" :checked="reversed" @change="handleReverseChange" />
		</view> -->
		
		<view class="content">
			<view v-if="loading" class="loading">
				<text>加载中...</text>
			</view>
			
			<view v-if="error" class="error">
				<text>{{ error }}</text>
			</view>
			
			<view v-if="!loading && !error && lotteryData.length > 0" class="data-list">
				<view class="data-item" v-for="(item, index) in paginatedData" :key="index">
					<view class="data-info">
						<text class="data-period">{{ item.issueNumber }}</text>
						<text class="data-date">{{ item.date }}</text>
					</view>
					<view class="data-numbers">
						<!-- 只显示前三位号码 -->
						<text v-for="(num, i) in item.numbers.slice(0, 3)" :key="i" class="number">{{ num }}</text>
					</view>
					<view class="prize-info-row">
						<view class="prize-info-item">
							<text class="prize-info-label">奖池:</text>
							<text class="prize-info-value">{{ formatNumber(item.sales) }}</text>
						</view>
						<view class="prize-info-item">
							<text class="prize-info-label">中奖注数:</text>
							<text class="prize-info-value">{{ item.directBet?.count || '无数据' }}</text>
						</view>
						<view class="prize-info-item">
							<text class="prize-info-label">单注奖金:</text>
							<text class="prize-info-value">{{ formatNumber(item.directBet?.prize) }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="!loading && !error && lotteryData.length === 0" class="no-data">
				<text>暂无数据</text>
			</view>
			
			<view v-if="usePagination && totalPages > 1" class="pagination">
				<button @click="goToFirstPage" :disabled="currentPage === 1">首页</button>
				<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
				<text>第 {{ currentPage }} / {{ totalPages }} 页</text>
				<text>共 {{ filteredData.length }} 条记录</text>
				<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
				<button @click="goToLastPage" :disabled="currentPage === totalPages">尾页</button>
			</view>
		</view>
		
		<!-- <view class="footer">
			<button @click="togglePagination">{{ usePagination ? '关闭分页' : '开启分页' }}</button>
		</view> -->
	</view>
</template>

<script>
	import lotteryService from '../../utils/lotteryService.js';
	
export default {
		data() {
			return {
				lotteryData: [],
				loading: true,
				error: null,
				currentPage: 1,
				itemsPerPage: 10,
				usePagination: true,
				searchQuery: '',
				matchStartOnly: false,
				reversed: false  // 新增：倒序显示标志
			}
		},
		computed: {
			filteredData() {
				let filtered = [];
				if (!this.searchQuery) {
					filtered = [...this.lotteryData];
				} else {
					// 去掉搜索 query 中的空格和逗号
					const cleanQuery = this.searchQuery.replace(/[ ,]/g, '');
					
					filtered = this.lotteryData.filter(item => {
						// 只使用前三位号码进行搜索
						const numbersStr = item.numbers.slice(0, 3).join('');
						
						if (this.matchStartOnly) {
							// 开头匹配模式：必须按照开头顺序匹配
							return numbersStr.startsWith(cleanQuery);
						} else {
							// 普通匹配模式：只要前三个数字中包含搜索的数字，不考虑顺序
							// 将查询字符串和号码字符串转换为数字集合
							const queryDigits = new Set(cleanQuery.split(''));
							const numberDigits = new Set(numbersStr.split(''));
							
							// 检查查询的每个数字是否都在号码中存在
							for (const digit of queryDigits) {
								if (!numberDigits.has(digit)) {
									return false;
								}
							}
							return true;
						}
					});
				}
				
				// 根据reversed标志决定是否反转数据
				if (this.reversed) {
					filtered.reverse();
				}
				
				return filtered;
			},
			paginatedData() {
				if (!this.usePagination) return this.filteredData;
				const start = (this.currentPage - 1) * this.itemsPerPage;
				return this.filteredData.slice(start, start + this.itemsPerPage);
			},
			totalPages() {
				if (!this.usePagination) return 1;
				return Math.ceil(this.filteredData.length / this.itemsPerPage);
			}
		},
		methods: {
			formatNumber(value) {
				if (value === undefined || value === null || value === '') {
					return '无数据';
				}
				return value.toLocaleString('zh-CN');
			},
			togglePagination() {
				this.usePagination = !this.usePagination;
				this.currentPage = 1;
			},
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
			},
			handleReverseChange(e) {
				// 当倒序状态改变时，更新状态并重置到第一页
				this.reversed = e.detail.value;
				this.currentPage = 1;
			},
			async loadData() {
				try {
					this.loading = true;
					const data = await lotteryService.fetchLotteryData();
					this.lotteryData = data;
					console.log('数据加载成功：', data.length, '条记录');
				} catch (error) {
					this.error = '数据加载失败：' + error.message;
					console.error('加载失败：', error);
				} finally {
					this.loading = false;
				}
			},
			goToFirstPage() {
				this.currentPage = 1;
			},
			goToLastPage() {
				this.currentPage = this.totalPages;
			}
		},
		mounted() {
			this.loadData();
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.search-container {
		display: flex;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.search-input {
		flex: 1;
		height: 80rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.search-button {
		height: 80rpx;
		padding: 0 30rpx;
		background: #f0f0f0;
		color: #333;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.search-button.active {
		background: #667eea;
		color: white;
	}

	/* 新增：倒序开关样式 */
	.sort-container {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.sort-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.reverse-switch {
		transform: scale(0.8);
	}

	.loading {
		text-align: center;
		padding: 40rpx;
		font-size: 28rpx;
		color: #666;
	}

	.error {
		background: #fee;
		color: #c33;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		border: 2rpx solid #fcc;
	}

	.content {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.data-list {
		margin-bottom: 20rpx;
	}

	.data-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.data-item:last-child {
		border-bottom: none;
	}

	.data-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.data-period {
		font-weight: bold;
		color: #333;
		font-size: 32rpx;
	}

	.data-date {
		color: #666;
		font-size: 24rpx;
	}

	.data-numbers {
		display: flex;
		gap: 10rpx;
		margin-bottom: 15rpx;
	}

	/* 新增：水平排列的奖池信息行 */
	.prize-info-row {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
		align-items: center;
	}

	/* 新增：单个奖池信息项 */
	.prize-info-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}

	.prize-info-label {
		color: #666;
		margin-right: 10rpx;
	}

	.prize-info-value {
		color: #667eea;
		font-weight: bold;
	}

	.number {
		width: 40rpx;
		height: 40rpx;
		background: #667eea;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 24rpx;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 15rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		background: #f9f9f9;
		border-radius: 8rpx;
	}

	.pagination button {
		padding: 12rpx 20rpx;
		background: #667eea;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
		min-width: 80rpx;
	}

	.pagination text {
		font-size: 24rpx;
		color: #333;
		padding: 0 10rpx;
	}

	.pagination button:disabled {
		background: #ccc;
	}

	.pagination span {
		font-size: 24rpx;
		color: #333;
	}

	.footer {
		text-align: center;
		margin-top: 40rpx;
	}

	.footer button {
		padding: 12rpx 24rpx;
		background: #667eea;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #666;
		font-size: 28rpx;
	}

	@media (max-width: 768rpx) {
		.data-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 10rpx;
		}
		
		.pagination {
			flex-direction: column;
		}
		
		/* 移动端适配：奖池信息在小屏幕上可以换行 */
		.prize-info-row {
			justify-content: flex-start;
		}
	}
</style>